<template>
    <div class="content" v-loading="loading" element-loading-text="拼命加载中">
        <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <h2 style="text-align: center;">{{form.title}}</h2>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div class="msg">
                    <el-tag>发布时间：{{form.createTime}}</el-tag>
                    <el-tag>修改时间：{{form.createTime}}</el-tag>
                    <el-tag>作者：{{form.username}}</el-tag>
                    <el-tag>类型：{{form.type==0 ? '公告' : form.type==1 ? '通知' : '日志'}}</el-tag>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div class="ql-editor" v-html="form.content"> </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { getNotice } from "@/api/system/notice";
export default {
    data() {
        return {
            // 表单参数
            form: {},
            loading: false,
        };
    },
    created() {
        this.handleView();
    },
    methods: {
        /** 预览按钮操作 */
        handleView() {
            this.loading = true;
            const noticeId = this.$route.query.noticeId;
            getNotice(noticeId).then((response) => {
                this.form = response.data;
                this.form.content = this.form.content.replace(
                    /\<img/gi,
                    '<img style="max-width: 80%;height:auto"'
                );
                this.loading = false;
            });
        },
    },
};
</script>
<style scoped>
.content {
    margin: 3%;
}
.msg {
    text-align: center;
}
</style>